<%--
  Created by IntelliJ IDEA.
  User: Liubuzhu
  Date: 2023/12/3
  Time: ฅ(΅•ㅅ•΅❀)ฅ 20:37
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>玩家管理</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="../../js/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
	<el-container>
		<el-aside width="200px" height="100%">
			<el-menu :default-active="activeMenu" @select="handleMenuSelect" >
				<el-submenu index="sub1">
					<template slot="title">FunPlay游戏商店管理管理</template>
					<el-menu-item index="admin">管理员管理</el-menu-item>
					<el-menu-item index="developer">游戏开发商管理</el-menu-item>
					<el-menu-item index="player">玩家管理</el-menu-item>
					<el-menu-item index="game">游戏管理</el-menu-item>
					<el-menu-item index="library">游戏库管理</el-menu-item>
					<el-menu-item index="category">游戏分类管理</el-menu-item>
					<el-menu-item index="comment">游戏评论管理</el-menu-item>
					<el-menu-item index="order">订单管理</el-menu-item>
					<el-menu-item index="tubiao">销售图表</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-main>
				<div>
					<h1>管理员管理</h1>
					<el-row :gutter="10" class="mb8">
						<el-col :span="1.5">
							<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
						</el-col>
					</el-row>

					<el-table :data="players" style="width: 100%">
						<el-table-column label="玩家编号" align="center" prop="playerId"></el-table-column>
						<el-table-column label="名称" align="center" prop="playerName"></el-table-column>
						<el-table-column label="账号" align="center" prop="playerUsername"></el-table-column>
						<el-table-column label="等级" align="center" prop="playerLevel"></el-table-column>
						<el-table-column label="联系方式" align="center" prop="playerContact"></el-table-column>
						<el-table-column label="邮箱" align="center" prop="playerEmail"></el-table-column>
						<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
							<template slot-scope="scope">
								<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
								<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>

						<el-form ref="form" :model="form" :rules="rules" label-width="110px">
							<el-form-item label="名称" prop="playerName">
								<el-input v-model="form.playerName" placeholder="请输入玩家名称"></el-input>
							</el-form-item>
							<el-form-item label="账号" prop="playerUsername">
								<el-input v-model="form.playerUsername" placeholder="请输入玩家账号" />
							</el-form-item>
							<el-form-item label="等级" prop="playerLevel">
								<el-input v-model="form.playerLevel" placeholder="请输入等级" />
							</el-form-item>
							<el-form-item label="联系方式" prop="playerContact">
								<el-input v-model="form.playerContact" placeholder="请输入联系方式" />
							</el-form-item>
							<el-form-item label="头像" prop="playerImage">
								<el-input v-model="form.playerImage" placeholder="请选择头像" />
							</el-form-item>
							<el-form-item label="邮箱" prop="playerEmail">
								<el-input v-model="form.playerEmail" placeholder="请输入邮箱" />
							</el-form-item>
						</el-form>

						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="submitForm">确 定</el-button>
							<el-button @click="cancel">取 消</el-button>
						</div>
					</el-dialog>

				</div>
			</el-main>
		</el-container>
	</el-container>
</div>
<script>
	// 创建 Vue 实例
	new Vue({
		el: '#app',
		data: {
			activeMenu: 'player',  // 默认选中的菜单项
			players: [],
			open: false,
			title: "",
			form: {},
			rules: {},
		},
		created() {
			// 创建时
			this.getPlayerList();
		},
		methods: {
			// 提交
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.playerId != null) {
							axios.post('http://localhost:8080/funplay_war/player', {
								action: 'update',
								playerId: this.form.playerId,
								playerName: this.form.playerName,
								playerImage: this.form.playerImage,
								playerLevel: this.form.playerLevel,
								playerEmail: this.form.playerEmail,
								playerContact: this.form.playerContact,
								playerUsername: this.form.playerUsername
							}, {
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
								}
							})
								.then(response => {
									this.msgSuccess("修改成功");
									this.open = false;
									this.getAdminList();
								})
								.catch(error => {
									console.error('修改失败:', error);
								});
						} else {
							axios.post('http://localhost:8080/funplay_war/player', {
								action: 'add',
								playerId: this.form.playerId,
								playerName: this.form.playerName,
								playerImage: this.form.playerImage,
								playerLevel: this.form.playerLevel,
								playerEmail: this.form.playerEmail,
								playerContact: this.form.playerContact,
								playerUsername: this.form.playerUsername
							}, {
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
								}
							})
								.then(response => {
									this.msgSuccess("新增成功");
									this.open = false;
									this.getPlayerList();
								})
								.catch(error => {
									console.error('新增失败:', error);
								});
						}
					}
				});
			},
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					playerId: null,
					playerImage: null,
					playerName: null,
					playerLevel: null,
					playerAddress: null,
					playerUsername: null,
					playerContact: null,
					playerEmail: null,
				};
			},
			// 修改按钮
			handleUpdate(row) {
				this.reset();
				const playerId = row.playerId;
				axios.get('http://localhost:8080/funplay_war/player', { params: { action: 'getById', playerId: playerId } })
					.then(response => {
						this.form = response.data;
						this.open = true;
						this.title = "修改玩家信息";
					});
			},
			// 删除按钮
			handleDelete(row) {
				// 删除开发商
				this.$confirm('是否确认删除玩家编号为"' + row.playerId + '"的数据？', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function () {
					return axios.post('http://localhost:8080/funplay_war/player', {
						action: 'delete',
						playerId: row.playerId
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					});
				}).then(() => {
					this.getPlayerList();
					this.msgSuccess("删除成功");
				})
			},
			// 添加按钮
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加玩家信息";
			},
			getPlayerList() {
				// 使用 Axios 发送 GET 请求获取管理员数据
				axios.get('http://localhost:8080/funplay_war/player', { params: { action: 'getAll' } })
					.then(response => {
						// 请求成功，将数据赋值给players
						console.log(JSON.stringify(response.data));
						this.players = response.data;
					})
					.catch(error => {
						// 请求失败
						console.error('请求玩家数据失败:', error);
					});
			},
			// 处理菜单选择事件
			handleMenuSelect(index) {
				// 根据选择的菜单项动态加载组件
				switch (index) {
					case 'admin':
						window.location.href = "adminManage.jsp";
						break;
					case 'developer':
						window.location.href = "developerManage.jsp";
						break;
					case 'player':
						window.location.href = "playerManage.jsp";
						break;
					case 'game':
						window.location.href = "gameManage.jsp";
						break;
					case 'gameComment':
						window.location.href = "gameCommentManage.jsp";
						break;
					case 'gameCategory':
						window.location.href = "gameCategoryManage.jsp";
						break;
					case 'playerGameLibrary':
						window.location.href = "playerGameLibraryManage.jsp";
						break;
					case 'purchaseRecord':
						window.location.href = "purchaseRecordManage.jsp";
						break;
					case 'saleReport':
						window.location.href = "saleReport.jsp";
						break;
					default:
						break;
				}
			},
		},
	});
</script>
</body>
</html>
